<template>
	<view class="add-address">
		<div class="uForm">
			<u-form :border-bottom="false" :model="form" ref="uForm" :rule="rules">
				<u-form-item class="border" label="自提点" label-width="130" prop="addressName">
					<u-input v-model="form.addressName" clearable placeholder="请输入自提点姓名" />
				</u-form-item>
				<u-form-item label="手机号码" label-width="130" prop="mobile">
					<u-input v-model="form.mobile" type="number" maxlength="11" placeholder="请输入自提点手机号码" />
				</u-form-item>

				<u-form-item class="detailAddress" label="详细地址" label-width="130" prop="address">
					<u-input type="textarea" v-model="form.address" maxlength="100" placeholder="街道楼牌号等" />
					<div @click="showPicker" class="select-btn">选择地址</div>
				</u-form-item>
				<div class="submit" @click="save">{{routerVal.id ? `保存` : '添加'}}</div>
				<div v-if="this.routerVal.id" class="submit del" @click="enableDeleteModel=true">删除</div>
			</u-form>
			<m-city :provinceData="list" headTitle="区域选择" ref="cityPicker" @funcValue="getpickerParentValue"
				pickerSize="4"></m-city>
			<u-modal :confirm-style="{color:'#333'}" show-cancel-button v-model="enableDeleteModel" @confirm="del"
				:async-close="true" content="是否删除自提？"></u-modal>
		</div>
	</view>
</template>
<script>
	import {
		editShopAddress,
		deleteShopAddress,
		addShopAddress,
	} from "@/api/shops";
	import gkcity from "@/components/m-city/m-city.vue";
	export default {
		components: {
			"m-city": gkcity,
		},
		data() {
			return {
				enableDeleteModel: false,
				routerVal: "",
				region: "",
				form: {
					addressName: "", // 自提点姓名
					mobile: "", // 自提点电话
					address: "", // 详细地址
				},
				list: [{
					id: "",
					localName: "请选择",
					children: [],
				}, ],
				// 表单提交校验规则
				rules: {
					addressName: [{
						required: true,
						message: "自提点姓名不能为空",
						trigger: ["blur", "change"],
					}, ],
					mobile: [{
							required: true,
							message: "手机号码不能为空",
							trigger: ["blur", "change"],
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: "手机号码不正确",
							trigger: ["change", "blur"],
						},
					],

					address: [{
						required: true,
						message: "请填写详细地址",
						trigger: ["blur", "change"],
					}, ],
				},
				list: [{
					id: "",
					localName: "请选择",
					children: [],
				}, ],
			};
		},
		onLoad(options) {
			this.routerVal = options.data ?
				JSON.parse(decodeURIComponent(options.data)) :
				"";
		},
		onShow() {
			this.init();
		},
		// 初始化rules必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 删除自提管理
			del() {
				deleteShopAddress(this.routerVal).then((res) => {
					if (res.data.success) {
						uni.showToast({
							title: "删除成功!",
							duration: 2000,
							icon: "none",
						});
						this.enableDeleteModel = false;

						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
							});
						}, 500);
					}
				});
			},
			init() {
				// 将查出来的数据回显
				this.routerVal.id ? (this.form = this.routerVal) : "";
			},
			// 显示三级地址联动
			showPicker() {
				this.$refs.cityPicker.show();
			},
			// 三级地址联动回调
			getpickerParentValue(e) {
				// 将需要绑定的地址设置为空，并赋值
				e.forEach((item, index) => {
					if (item.id) {
						// console.log(item);
						this.form.address += item.localName;
						if (index == 3) {
							let findAddress = item.children.find((child) => {
								return child.id == item.id;
							});
							this.form.center = findAddress.center;
						}
					}
				});
			},

			// 保存自提地址
			save() {
				this.$refs.uForm.validate(async (valid) => {
					if (valid) {
						this.form.longitude = this.form.center.split(',')[0]
						this.form.latitude = this.form.center.split(',')[1]
						if (this.routerVal.id) {
							let res = await editShopAddress(this.routerVal.id, this.form);
							if (res.data.success) {
								this.done();
							}
						} else {
							// 新增地址
							let form = JSON.parse(JSON.stringify(this.form));
							let res = await addShopAddress(form);
							if (res.data.success) {
								this.done();
							}
						}
					}
				});
			},

			done() {
				uni.showToast({
					title: "保存成功",
					duration: 2000,
					icon: "none",
				});

				setTimeout(() => {
					uni.navigateBack();
				}, 500);
			},

			// 显示三级地址联动
			showPicker() {
				this.$refs.cityPicker.show();
			},
		},
	};
</script>
<style scoped lang="scss">
	.detailAddress {
		/deep/ .u-form-item--left {
			display: flex;
			align-items: flex-start;
		}
	}

	.select-btn {
		background: #333;
		border-radius: 10rpx;
		color: #fff;
		font-size: 24rpx;
		line-height: 1;
		padding: 12rpx 20rpx;
	}

	.del {
		margin-top: 30rpx;
		background: #fff;
		border: 2rpx solid #ededed;
		color: #666;
	}

	.uForm {
		width: 94%;
		overflow: hidden;
		left: 3%;
		position: relative;
		top: 2%;
		background: #fff;
		border-radius: 20rpx;
		padding: 0 0 40rpx 0;
	}

	.add-address {
		width: 100%;
		padding-top: 3%;

		/deep/ .u-form-item {
			background-color: #fff;
			padding: 24rpx 30rpx;
		}

		.u-btn {
			margin: 30rpx 30rpx 0 30rpx;
			background-color: $main-color;
		}

		/deep/.u-checkbox {
			margin: 30rpx 30rpx 0 30rpx;

			.u-label-class.u-checkbox__label {
				color: $font-color-light;
				font-size: $font-sm;
			}
		}
	}

	/deep/ .u-checkbox__label {
		font-size: 28rpx;
	}
</style>
